<template>
  <div class="style-page">
    <div class="head-page-title">{{ showComponentData.title }}</div>
    <div class="line"></div>
    <div class="head-title">内容设置</div>

    <div class="component-style">
      <el-form :model="form">
        <el-form-item label="头部背景：">
          <el-radio-group v-model="showComponentData.bgType">
            <el-radio :value="1">颜色</el-radio>
            <el-radio :value="2">背景图片</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="showComponentData.bgType === 1">
          <div style="display: flex; align-items: center; margin-left: 68px; margin-bottom: 20px">
            <el-color-picker v-model="form.bgColor"></el-color-picker>
            <el-input style="width: 160px; margin-left: 10px" v-model="form.bgColor">
              <template #append>
                <el-button @click="form.bgColor = '#f5f5f5'">重置</el-button>
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item v-if="showComponentData.bgType === 2">
          <div class="avatar-uploader" @click="handleChangeImage">
            <el-image
              v-if="form.backgroundImage"
              :src="form.backgroundImage"
              class="avatar"
              fit="cover"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"
              ><el-icon> <Plus /> </el-icon
            ></i>
            <div v-if="form.backgroundImage" class="mask">替换</div>
            <el-icon
              v-if="form.backgroundImage"
              class="del-image"
              :size="20"
              @click.stop="handleDelBackgroundImage"
              ><CircleCloseFilled
            /></el-icon>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div class="component-style">
      <common-style
        :content-data="showComponentData"
        @update-style="handleUpdateStyle"
      ></common-style>
    </div>

    <image-selected-dialog
      v-if="showImageChooseDialog"
      :single-type="true"
      :operation-type="false"
      :show-image-choose-dialog="showImageChooseDialog"
      @close-dialog="handleCloseImageDialog"
    ></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
  import CommonStyle from '@/views/decoration/diyComponents/CommonStyleComponent/CommonStyle.vue'
  import debounce from 'lodash/debounce'
  import { CircleCloseFilled, Plus } from '@element-plus/icons-vue'
  import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

  const props = defineProps({
    contentData: {
      type: Object,
      default() {
        return {}
      }
    }
  })

  const form = reactive({
    bgColor: '#fff',
    backgroundImage: ''
  })

  const showImageChooseDialog = ref(false)

  watch(
    form,
    () => {
      emitFormUpdate()
    },
    { deep: true }
  )
  const emit = defineEmits(['updateData'])

  const showComponentData = ref(props.contentData)

  const emitFormUpdate = debounce(() => {
    const raw = toRaw(form)
    showComponentData.value.style.backgroundColor = raw.bgColor
    showComponentData.value.style.backgroundImage = raw.backgroundImage
    handleUpdateComponent()
  }, 300)

  function handleUpdateComponent() {
    emit('updateData', showComponentData.value)
  }

  function handleChangeImage() {
    showImageChooseDialog.value = true
  }

  function handleDelBackgroundImage() {
    form.backgroundImage = ''
  }

  function handleUpdateStyle(val: any) {
    showComponentData.value.style = val
    handleUpdateComponent()
  }

  function handleCloseImageDialog(value: any) {
    if (value) {
      form.backgroundImage = value.fileUrl
      handleUpdateComponent()
    }
    showImageChooseDialog.value = false
  }

  onMounted(() => {
    if (props.contentData.style.backgroundColor) {
      form.bgColor = props.contentData.style.backgroundColor
      form.backgroundImage = props.contentData.style.backgroundImage
    }
  })
</script>

<style scoped lang="scss">
  .style-page {
    padding: 20px;

    .head-page-title {
      padding-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: black;
    }

    .head-title {
      padding: 20px 0;
      font-size: 14px;
      font-weight: bold;
      color: black;
    }

    .line {
      width: 100%;
      height: 1px;
      background: #f5f7fa;
    }

    .component-style {
      width: 100%;
      box-sizing: border-box;
      margin-top: 20px;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .title {
          font-size: 16px;
          font-weight: bold;
        }
      }

      .flex {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 3px;
      }
    }
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 80px;
    height: 80px;
    margin-left: 80px;
    background-color: #fff;
    text-align: center;

    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 24px;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      color: #fff;
      font-size: 12px;
    }

    .del-image {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      color: #8c939d;
    }

    &:hover .mask {
      opacity: 1;
    }

    &:hover .del-image {
      display: block;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
  }
</style>
